<template>
  <div class="scriptManage">
    <!-- 下方 -->
    <div
      class="scriptManage_bottom"
      v-loading="loading"
      element-loading-text="加载中..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(200, 200, 200, 0.7)"
    >
      <div class="scr_list">
        <!-- 左上角的脚本列表 -->
        <!-- <div class="scr_list_top"> -->
        <!-- 列表头的操作 -->
        <div class="headerTop">
          <div style=" font-size: .36rem;">脚本列表</div>
          <div>
            <el-button
              style="float: right; margin-left: 10px; "
              type="warning"
              size="mini"
              v-if="isOn"
              title="读取"
              @click="read"
              >读 取</el-button
            >
            <el-button
              style="float: right; margin-left: 10px; "
              type="warning"
              size="mini"
              v-if="!isOn"
              disabled
              title="设备离线"
              >读 取</el-button
            >
            <!-- <el-button type="primary" v-if="isOn" title="保存" @click="save">保 存</el-button>
                    <el-button type="primary" v-if="!isOn" disabled title="设备离线">保 存</el-button> -->
            <el-button
              style="float: right;"
              type="success"
              size="mini"
              v-if="isOn"
              title="下发"
              @click="Distribute"
              >下 发</el-button
            >
            <el-button
              style="float: right;"
              type="success"
              size="mini"
              v-if="!isOn"
              disabled
              title="设备离线"
              >下 发</el-button
            >
            <el-button
              style="float: right;"
              size="mini"
              type="primary"
              title="添加"
              @click="addScript"
              >添 加
            </el-button>
          </div>
        </div>
        <!-- 列表 -->
        <!-- {{ look }} -->
        <div class="top_list" v-if="scrList.length">
          <div
            v-for="(item, index) in scrList"
            :key="item.value"
            :title="item.script_name"
            :class="[
              'oneScriptList',
              { selectedItem: selectedIndex === index }
            ]"
          >
            <div
              @click="selectItem(index, item)"
              style="width: 90%; text-align: left"
            >
              {{ item.script_name }}
            </div>
            <div style="flex:1;text-align:right">
              <i
                style="color: #9a9090"
                class="el-icon-edit-outline iconBtn"
                @click="editScript0(item, index)"
              >
              </i>
            </div>
            <div style="flex:1;text-align:right">
              <i
                style="color: #f56c6c"
                class="el-icon-delete iconBtn"
                @click="sureDeleteScript(item, index)"
              >
              </i>
            </div>
          </div>
          <!-- <span style="font-size: small;">{{ scriptLook.content }}</span> -->
        </div>
        <div v-else style="color:#bbb;font-size:0.35rem;line-height: 1rem;">
          暂无数据
        </div>
        <!-- 新增脚本弹出框 -->
        <el-dialog
          :width="win.screen.width >= 1600 ? '18%' : '28%'"
          :visible.sync="addScriptVisible"
          append-to-body
          :show-close="close"
          top="220px"
        >
          <div class="toptit">
            <span>添加脚本</span>
            <span
              style="float: right; cursor: pointer"
              @click="addScriptVisible = false"
              >关闭</span
            >
          </div>
          <div>
            <el-form class="form" :model="scriptAlloca" label-width="110px">
              <el-form-item label="名称 :">
                <el-input
                  class="inpu"
                  v-model="scriptAlloca.scrName"
                  placeholder="脚本名称"
                ></el-input>
              </el-form-item>
              <el-form-item label="类型 :">
                <el-select v-model="scriptAlloca.type" class="inpu">
                  <el-option
                    v-for="item in workType"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="循环间隔 :">
                <el-input
                  type="number"
                  class="inpu"
                  v-model="scriptAlloca.timeInterval"
                ></el-input>
              </el-form-item>
            </el-form>
            <div style="text-align: right; margin-right: 11.2%">
              <el-button @click="sureScript" type="primary" size="mini"
                >确定</el-button
              >
              <el-button size="mini" @click="addScriptVisible = false"
                >取消</el-button
              >
            </div>
          </div>
        </el-dialog>
        <!-- 编辑脚本 -->
        <el-dialog
          :width="win.screen.width >= 1600 ? '18%' : '28%'"
          :visible.sync="editScriptVisible"
          append-to-body
          :show-close="close"
          top="220px"
        >
          <div class="toptit">
            <span>编辑脚本</span>
            <span
              style="float: right; cursor: pointer"
              @click="editScriptVisible = false"
              >关闭</span
            >
          </div>
          <div>
            <el-form class="form" :model="scriptLook" label-width="110px">
              <el-form-item label="名称 :">
                <el-input
                  class="inpu"
                  v-model="scriptLook.scrName"
                  placeholder="脚本名称"
                ></el-input>
              </el-form-item>
              <el-form-item label="类型 :">
                <el-select v-model="scriptLook.type" class="inpu">
                  <el-option
                    v-for="item in workType"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="循环间隔 :">
                <el-input
                  type="number"
                  class="inpu"
                  v-model="scriptLook.timeInterval"
                ></el-input>
              </el-form-item>
            </el-form>
            <div style="text-align: right; margin-right: 11.2%">
              <el-button @click="sureEditScript0" type="primary" size="mini"
                >确定</el-button
              >
              <el-button size="mini" @click="editScriptVisible = false"
                >取消</el-button
              >
            </div>
          </div>
        </el-dialog>
        <!-- </div> -->
        <!-- 三个按钮 -->
        <!-- <div class="left_btn_group">
          <el-button type="primary" size="mini" v-if="isOn" title="读取" @click="read">读 取</el-button>
          <el-button type="primary" size="mini" v-if="!isOn" disabled title="设备离线">读 取</el-button>
          <el-button type="success" size="mini" v-if="isOn" title="下发" @click="Distribute">下 发</el-button>
          <el-button type="success" size="mini" v-if="!isOn" disabled title="设备离线">下 发</el-button>
        </div> -->
      </div>

      <!-- 中间信息 -->
      <div class="scr_group">
        <div class="btn_group_list">
          <!-- 名称: <span style="font-size: .4rem;">{{ scriptLook.scrName }}</span> &nbsp;&nbsp;&nbsp; -->
          类型 :
          <span
            style="font-size: .36rem;font-weight: 600; display: inline-block; width: 3rem !important;"
          >
            <span style="padding: 0 .2rem;">{{
              workType[scriptLook.type].label
            }}</span> </span
          >&nbsp;&nbsp;&nbsp; 循环间隔 :
          <span style="font-size: .36rem;font-weight: 600;padding: 0 .2rem;">{{
            scriptLook.timeInterval
          }}</span
          >&nbsp;S
          <!-- <span style="float: right">
            主题:
            <el-select v-model="themeSelect" style="width: 2rem;" @change="changeTheme()">
              <el-option v-for="(item, index) in theme_select" :key="index" :value="item.value"
                :label="item.label"></el-option> </el-select>
          </span> -->
          <!-- <div style="flex: 1;"></div> -->
        </div>
        <!-- <el-button size="mini" icon="el-icon-setting" @click="insertContent('SUM', 'func')">添加函数
                </el-button> -->

        <div class="btn_group">
          <el-menu
            :default-active="activeIndex"
            text-color="#000"
            active-text-color="#000"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            unique-opened
          >
            <!-- <el-menu-item index="1">处理中心</el-menu-item> -->
            <!-- 1.语句 -->
            <el-submenu index="1" title="语句" :disabled="look === 2">
              <template slot="title"
                >IF</template
              >
              <el-menu-item index="1-1" class="itemMenu"
                >IF THEN ENDIF</el-menu-item
              >
              <el-menu-item index="1-2" class="itemMenu"
                >IF THEN ELSE ENDIF</el-menu-item
              >
            </el-submenu>
            <!-- 2.逻辑运算符 -->
            <el-submenu index="2" title="逻辑运算符" :disabled="look === 2">
              <template slot="title"
                >OR</template
              >
              <el-menu-item index="2-1" class="itemMenu">and</el-menu-item>
              <el-menu-item index="2-2" class="itemMenu">or</el-menu-item>
              <el-menu-item index="2-3" class="itemMenu">not</el-menu-item>
            </el-submenu>
            <!-- 3.算数运算符 -->
            <el-submenu index="3" title="算数运算符" :disabled="look === 2">
              <template slot="title"
                >+</template
              >
              <el-menu-item index="3-1" class="itemMenu">+</el-menu-item>
              <el-menu-item index="3-2" class="itemMenu">-</el-menu-item>
              <el-menu-item index="3-3" class="itemMenu">*</el-menu-item>
              <el-menu-item index="3-4" claslooks="itemMenu">/</el-menu-item>
              <el-menu-item index="3-5" class="itemMenu">%</el-menu-item>
            </el-submenu>
            <!-- 4.比较运算符 -->
            <el-submenu index="4" title="比较运算符" :disabled="look === 2">
              <template slot="title"
                >></template
              >
              <el-menu-item index="4-1" class="itemMenu">=</el-menu-item>
              <el-menu-item index="4-2" class="itemMenu">==</el-menu-item>
              <el-menu-item index="4-3" class="itemMenu">&lt;</el-menu-item>
              <el-menu-item index="4-4" class="itemMenu">&gt;</el-menu-item>
              <el-menu-item index="4-5" class="itemMenu">&le;</el-menu-item>
              <el-menu-item index="4-6" class="itemMenu"> &ge;</el-menu-item>
              <el-menu-item index="4-7" class="itemMenu">!=</el-menu-item>
            </el-submenu>

            <!-- 6.系统变量 -->
            <el-submenu
              index="6"
              class="hasChild"
              title="系统变量"
              :disabled="look === 2"
            >
              <template slot="title"
                >Tv</template
              >
              <el-submenu index="6-1">
                <template slot="title" class="itemMenu"
                  >时间</template
                >
                <el-menu-item index="6-1-1" class="itemMenu">年</el-menu-item>
                <el-menu-item index="6-1-2" class="itemMenu">月</el-menu-item>
                <el-menu-item index="6-1-3" class="itemMenu">日</el-menu-item>
                <el-menu-item index="6-1-4" class="itemMenu">时</el-menu-item>
                <el-menu-item index="6-1-5" class="itemMenu">分</el-menu-item>
                <el-menu-item index="6-1-6" class="itemMenu">秒</el-menu-item>
                <el-menu-item index="6-1-7" class="itemMenu">星期</el-menu-item>
                <el-menu-item index="6-1-8" class="itemMenu">日分</el-menu-item>
                <el-menu-item index="6-1-9" class="itemMenu">时分</el-menu-item>
              </el-submenu>
              <el-submenu index="6-2">
                <template slot="title"
                  >定时器</template
                >
                <el-menu-item index="6-2-1" class="itemMenu">Tv</el-menu-item>
                <el-menu-item index="6-2-2" class="itemMenu">Ts</el-menu-item>
              </el-submenu>
              <el-submenu index="6-3">
                <template slot="title"
                  >内部变量</template
                >
                <el-menu-item index="6-3-1" class="itemMenu">X</el-menu-item>
                <el-menu-item index="6-3-2" class="itemMenu">Y</el-menu-item>
                <el-menu-item index="6-3-3" class="itemMenu">M</el-menu-item>
                <el-menu-item index="6-3-4" class="itemMenu">S</el-menu-item>
                <el-menu-item index="6-3-5" class="itemMenu">D</el-menu-item>
                <el-menu-item index="6-3-6" class="itemMenu">DL</el-menu-item>
                <el-menu-item index="6-3-7" class="itemMenu">DU</el-menu-item>
                <el-menu-item index="6-3-8" class="itemMenu">DUL</el-menu-item>
                <el-menu-item index="6-3-9" class="itemMenu">DF</el-menu-item>
                <el-menu-item index="6-3-10" class="itemMenu">DD</el-menu-item>
              </el-submenu>
              <el-submenu index="6-4">
                <template slot="title"
                  >网络</template
                >
                <el-menu-item index="6-4-1" class="itemMenu"
                  >NetSts</el-menu-item
                >
                <el-menu-item index="6-4-2" class="itemMenu">Rssi</el-menu-item>
              </el-submenu>
            </el-submenu>
            <!-- 7.Fun -->
            <el-submenu index="7" title="常用功能" :disabled="look === 2">
              <template slot="title"
                >Fun</template
              >
              <el-menu-item index="7-1" class="itemMenu">循环启停</el-menu-item>
              <el-menu-item index="7-2" class="itemMenu">延时启动</el-menu-item>
              <el-menu-item index="7-3" class="itemMenu">延时停止</el-menu-item>
            </el-submenu>
            <!-- 5.注释 -->
            <el-menu-item
              index="5"
              title="注释符"
              class="oneMenu"
              :disabled="look === 2"
              ><span>//</span></el-menu-item
            >
          </el-menu>
          <i
            class="el-icon-edit save_btn"
            size="mini"
            v-if="look == 2"
            title="编辑"
            @click="editScript"
          ></i>
          <i
            class="el-icon-check save_btn"
            size="mini"
            v-if="look == 3"
            title="保存"
            @click="sureEditScript"
          ></i>
          <!-- <el-button v-if="look == 2" size="mini" class="save_btn" type="primary" @click="editScript">编辑</el-button> -->
          <!-- <el-button v-if="look == 3" size="mini" class="save_btn" type="success" @click="sureEditScript">确认</el-button> -->
        </div>
        <div class="code-edit">
          <!-- <div class="top-title">公式</div> -->
          <codemirror
            ref="codeEditor"
            v-model="scriptLook.content"
            :options="cmOptions"
            @input="codeMirrorChange"
          >
          </codemirror>
        </div>

        <!-- <el-button v-if="look == 2" size="mini" class="save_btn" type="primary" @click="editScript">编辑</el-button>
        <el-button v-if="look == 3" size="mini" class="save_btn" type="success" @click="sureEditScript">确认</el-button> -->
      </div>
      <!-- 右侧列表 -->
      <div class="point_group">
        <h5 style="font-size: .36rem;">变量列表</h5>
        <div class="sensorTree">
          <el-input
            style="width:98%;display:block;margin:0 auto;"
            :disabled="look === 2"
            placeholder="输入关键字进行过滤"
            v-model="filterText"
          >
          </el-input>
          <el-tree
            style="margin-top:0.1rem;"
            class="filter-tree"
            :data="sensorTree"
            :indent="30"
            :render-content="renderContent"
            @node-click="getSensorString"
            default-expand-all
            :filter-node-method="filterNode"
            ref="tree"
          >
          </el-tree>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { codemirror } from "vue-codemirror";
import "codemirror/lib/codemirror.css";
import "codemirror/theme/idea.css";

// import 'codemirror/theme/base16-dark.css'
import "codemirror/theme/rubyblue.css";
import "codemirror/theme/3024-night.css";
export default {
  components: { codemirror },
  data() {
    return {
      win: window,
      close: false,
      // 整体的数据
      // deviceData : JSON.parse(localStorage.getItem('deviceData')),
      loading: false,

      // 脚本语言列表
      scrList: [],
      selectedIndex: -1,
      // addForm: {
      //     script_list_name: '',
      //     script_type: '',
      //     interval: '',

      // },
      addScriptVisible: false,
      editScriptVisible: false,
      // 左下角的两个数据
      scriptAlloca: {
        scrName: "",
        type: 1,
        timeInterval: 0,
        content: ""
      },
      // 点击列表显示详情信息
      scriptLook: {
        scrName: "",
        type: 1,
        timeInterval: 0,
        content: ""
      },
      linshi: "",
      workType: [
        { value: 0, label: "启动时运行一次" },
        { value: 1, label: "循环运行" }
      ],
      themeSelect: 0,
      // 脚本块的主题
      theme_select: [{ value: 0, label: "默认" }, { value: 1, label: "黑色" }],
      cmOptions: {
        // 语言及语法模式
        mode: "text/javascript",

        // 主题
        theme: "idea",
        // theme: "rubyblue",
        // 显示函数
        line: true,
        lineNumbers: true,
        // 软换行
        lineWrapping: true,
        // tab宽度
        tabSize: 4,
        readOnly: false,
        // 显示光标
        showCursorWhenSelecting: true,
        // 剪切当前行
        lineWiseCopyCut: true,
        autofocus: true,
        smartIndent: true
      },
      lang: "javascript",

      activeIndex: "",
      // 右边变量
      filterText: "",
      sensorTree: [],
      // 按钮的文字
      look: 2,
      // 编辑时候的id临时储存
      editId: null,
      // 编辑临时储存的index
      editIndex: 0
    };
  },
  props: ["deviceData", "isOn", "isReadManage"],
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  computed: {
    editor() {
      return this.$refs.codeEditor.codemirror;
    }
  },
  mounted() {
    // this.deviceData = JSON.parse(localStorage.getItem('deviceData'));

    this.focus(this.scriptAlloca.content);
    this.autoMarkText();
    this.getSlaveSensorTree();
    var that = this;
    that.getScriptAll();
    setTimeout(() => {
      that.moren();
    }, 300);
    // 查询脚本信息
  },
  methods: {
    // 查询脚本信息
    getScriptAll() {
      this.scrList = [];
      this.$http({
        method: "post",
        url: "api/script/all",
        data: {
          equip_id: this.deviceData.id
        }
      })
        .then(res => {
          if (res && res.data.result == "success") {
            this.scrList = res.data.data;

            this.editId = this.scrList[this.editIndex || 0].id;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },

    getScriptAllLast() {
      this.scrList = [];
      this.$http({
        method: "post",
        url: "api/script/all",
        data: {
          equip_id: this.deviceData.id
        }
      })
        .then(res => {
          if (res && res.data.result == "success") {
            this.scrList = res.data.data;

            this.editId = this.scrList[this.scrList.length - 1].id;
            this.selectedIndex = this.scrList.length - 1;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    moren() {
      var that = this;
      let Base64 = require("js-base64").Base64;
      if (this.scrList.length > 0) {
        this.selectedIndex = 0;
        that.editId = this.scrList[0].id;
        (this.scriptLook = {
          scrName: this.scrList[0].script_name,
          type: this.scrList[0].script_type,
          timeInterval: this.scrList[0].interval,
          content: Base64.decode(this.scrList[0].content)
        }),
          (this.look = 2);
        this.cmOptions.readOnly = true;
      } else {
        this.scriptLook = {
          scrName: "",
          type: 1,
          timeInterval: 0,
          content: ""
        };
      }
    },
    // 添加脚本列表项目
    addScript() {
      this.addScriptVisible = true;
      // this.look = 1;
      // this.selectedIndex = -1;
      this.cmOptions.readOnly = false;
      this.scriptAlloca = {
        scrName: "",
        type: 1,
        timeInterval: 0,
        content: ""
      };
    },
    // 确定添加
    sureScript() {
      let Base64 = require("js-base64").Base64;
      var that = this;
      // 点击了新增
      this.$http({
        method: "post",
        url: "api/script/add",
        data: {
          equip_id: this.deviceData.id,
          script_name: this.scriptAlloca.scrName,
          script_type: this.scriptAlloca.type,
          interval: this.scriptAlloca.timeInterval
          // content: Base64.encode(this.scriptAlloca.content)
        }
        // reads.readAsDataURL()
      })
        .then(res => {
          if (res && res.data.result == "success") {
            this.$message({
              message: "添加脚本成功!",
              type: "success",
              center: true
            });
            this.addScriptVisible = false;
            this.getScriptAll();
            setTimeout(() => {
              that.selectedIndex = that.scrList.length - 1;
              let l = that.scrList.length - 1;
              this.editId = that.scrList[l].id;
              that.scriptLook = {
                scrName: that.scrList[l].script_name,
                type: that.scrList[l].script_type,
                timeInterval: that.scrList[l].interval,
                content: Base64.decode(that.scrList[l].content)
              };
              that.look = 3;
              that.cmOptions.readOnly = false;
            }, 240);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    editScript() {
      // 解开封印
      this.look = 3;
      this.cmOptions.readOnly = false;
    },

    // 确定编辑
    sureEditScript() {
      let Base64 = require("js-base64").Base64;
      var that = this;
      // 点击后是编辑
      this.$http({
        method: "post",
        url: "api/script/updateContent",
        data: {
          equip_id: this.deviceData.id,
          id: this.editId,
          // script_name: this.scriptLook.scrName,
          // script_type: this.scriptLook.type,
          // interval: this.scriptLook.timeInterval,
          content: Base64.encode(this.scriptLook.content)
        }
      })
        .then(res => {
          if (res && res.data.result == "success") {
            this.$message({
              message: "编辑脚本成功!",
              type: "success",
              center: true
            });
            this.look = 2;
            this.cmOptions.readOnly = true;
            //    查询脚本信息
            // this.getScriptAll();
            this.getScriptAllLast();

            this.selectedIndex = this.editIndex;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 点击了某一个项目
    selectItem(index, item) {
      let Base64 = require("js-base64").Base64;
      this.selectedIndex = index;
      this.editIndex = index;

      this.look = 2;
      this.cmOptions.readOnly = true;
      this.editId = item.id;
      this.scriptLook.scrName = item.script_name;
      this.scriptLook.type = item.script_type;
      this.scriptLook.timeInterval = item.interval;
      this.scriptLook.content = Base64.decode(item.content);
    },
    // 点击编辑
    editScript0(item, index) {
      let Base64 = require("js-base64").Base64;
      this.selectedIndex = index;
      // console.log('点击后面的编辑', item, index)
      this.editId = item.id;
      this.equip_id = item.equip_id;
      this.scriptLook.scrName = item.script_name;
      this.scriptLook.type = item.script_type;
      this.scriptLook.timeInterval = item.interval;
      this.scriptLook.content = Base64.decode(item.content);
      this.editScriptVisible = true;
    },
    //确认编辑脚本
    sureEditScript0(item, index) {
      var that = this;
      // let Base64 = require("js-base64").Base64;
      this.$http({
        method: "post",
        url: "api/script/update",
        data: {
          equip_id: this.equip_id,
          id: this.editId,
          script_name: this.scriptLook.scrName,
          script_type: this.scriptLook.type,
          interval: this.scriptLook.timeInterval
          // content: Base64.encode(this.scriptLook.content)
        }
      })
        .then(res => {
          if (res && res.data.result == "success") {
            this.$message({
              message: "编辑脚本成功!",
              type: "success",
              center: true
            });
            this.editScriptVisible = false;
            this.look = 2;
            this.cmOptions.readOnly = true;
            this.getScriptAll();
            this.selectedIndex = this.editIndex;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 删除脚本项目
    sureDeleteScript(item, index) {
      var that = this;
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(() => {
          this.$http({
            method: "post",
            url: "api/script/delete",
            data: {
              id: item.id
            }
          })
            .then(res => {
              if (res && res.data.result == "success") {
                // this.look = 1
                // that.getScriptAll();
                that.getScriptAll();

                if (index == this.selectedIndex) {
                  // 删除的是当前选中的   包含了最后一个脚本的时候  删除后的效果
                  that.scriptAlloca = {
                    scrName: "",
                    type: 0,
                    timeInterval: 0,
                    content: ""
                  };
                  setTimeout(() => {
                    that.moren();
                  }, 300);
                } else {
                  // 删除的不是当前选中的行
                  // 删除的是上面的
                  if (index < this.selectedIndex) {
                    this.selectedIndex -= 1;
                  }
                }
              }
            })
            .catch(error => {
              console.log(error);
            });
        })
        .catch(() => {});
    },
    handleChange(value) {
      // console.log(value);
    },
    handleSelect(key, keyPath) {
      // 语句
      if (keyPath[0] == "1") {
        switch (keyPath[1]) {
          case "1-1":
            this.insertContent(" if    then  \n\n  endif", "");
            break;
          case "1-2":
            this.insertContent(" if    then  \n\n  else \n\n  endif", "string");
            break;
          default:
          // 处理其他情况，如果有需要的话
        }
      }
      // 逻辑运算
      if (keyPath[0] == "2") {
        switch (keyPath[1]) {
          case "2-1":
            this.insertContent("and ", "string");
            break;
          case "2-2":
            this.insertContent("or ", "string");
            break;
          case "2-3":
            this.insertContent("not ", "string");
            break;
        }
      }
      // 算数运算
      if (keyPath[0] == "3") {
        switch (keyPath[1]) {
          case "3-1":
            this.insertContent("+ ", "count");
            break;
          case "3-2":
            this.insertContent("- ", "count");
            break;
          case "3-3":
            this.insertContent("* ", "count");
            break;
          case "3-4":
            this.insertContent("/ ", "count");
            break;
          case "3-5":
            this.insertContent("% ", "count");
            break;
        }
      }
      // 比较运算
      if (keyPath[0] == "4") {
        switch (keyPath[1]) {
          case "4-1":
            this.insertContent("= ", "count");
            break;
          case "4-2":
            this.insertContent("== ", "count");
            break;
          case "4-3":
            this.insertContent("< ", "count");
            break;
          case "4-4":
            this.insertContent("> ", "count");
            break;
          case "4-5":
            this.insertContent("<= ", "count");
            break;
          case "4-6":
            this.insertContent(">= ", "count");
            break;
          case "4-7":
            this.insertContent("!= ", "count");
            break;
        }
      }
      // 注释
      if (keyPath[0] == "5") {
        this.insertContent("// ", "annot");
      }
      // 系统变量
      if (keyPath[0] == "6") {
        switch (key) {
          case "6-1-1":
            this.insertContent("$Year ", "");
            break;
          case "6-1-2":
            this.insertContent("$Month ", "");
            break;
          case "6-1-3":
            this.insertContent("$Day ", "");
            break;
          case "6-1-4":
            this.insertContent("$Hour ", "");
            break;
          case "6-1-5":
            this.insertContent("$Min ", "");
            break;
          case "6-1-6":
            this.insertContent("$Sec ", "");
            break;
          case "6-1-7":
            this.insertContent("$Week ", "");
            break;
          case "6-1-8":
            this.insertContent("$DMin ", "");
            break;
          case "6-1-9":
            this.insertContent("$HMin ", "");
            break;
          case "6-2-1":
            this.insertContent("$Tv1 ", "");
            break;
          case "6-2-2":
            this.insertContent("$Ts1 ", "");
            break;

          case "6-3-1":
            this.insertContent("$X ", "");
            break;
          case "6-3-2":
            this.insertContent("$Y ", "");
            break;
          case "6-3-3":
            this.insertContent("$M ", "");
            break;
          case "6-3-4":
            this.insertContent("$S ", "");
            break;
          case "6-3-5":
            this.insertContent("$D ", "");
            break;
          case "6-3-6":
            this.insertContent("$DL ", "");
            break;
          case "6-3-7":
            this.insertContent("$DU ", "");
            break;
          case "6-3-8":
            this.insertContent("$DUL ", "");
            break;
          case "6-3-9":
            this.insertContent("$DF ", "");
            break;
          case "6-3-10":
            this.insertContent("$DD ", "");
            break;

          case "6-4-1":
            this.insertContent("$NetSts ", "");
            break;
          case "6-4-2":
            this.insertContent("$Rssi ", "");
            break;
        }
      }
      // 比较运算
      if (keyPath[0] == "7") {
        switch (keyPath[1]) {
          case "7-1":
            this.insertContent(
              "//循环开30s,关30s\nif $M0 ==1 and $Ts2 ==0 then\n$Tv1 =30\nelse\n$Tv1 =0\n endif\nif$Ts1 ==1 then\n$Tv2 =30\nelse\n$Tv2 =0\nendif\nif $M0 ==1 and $Ts1 ==0 then\n$M1 =1\nelse\n$M1 =0\nendif\n",
              "common"
            );
            break;
          case "7-2":
            this.insertContent(
              "//延时20s启动\nif $M10 ==1 then\n$Tv4 =20\nelse\n$Tv4 =0\nendif\nif $Ts4 ==1 then\n$M11 =1\nelse\n$M11 =0\nendif\n",
              "common"
            );
            break;
          case "7-3":
            this.insertContent(
              "//延时20s停止\nif $M20 ==1 then\n$M21=1\nendif\nif $M20 ==0 then\n$Tv3 =20\nelse\n$Tv3 =0\nendif\nif $M20 ==0 and $Ts3 ==1 then\n$M21 =0\nendif\n",
              "common"
            );
            break;
        }
      }
    },
    codeMirrorChange() {
      //获取 editor 的内容
      // console.log("content1: " + this.scriptAlloca.content);
      // console.log("content2: " + JSON.stringify(this.editor.getValue()));
      // this.autoMark();
      // this.autoMarkText()
      // let allText = JSON.stringify(this.editor.getValue())
    },
    addFormula(content, type) {
      this.insertContent(content, type);
    },
    /**
     * editor 中的对内容进行处理
     * @param value
     * @param type variable | func，variable为表单变量，需标记，func 为函数，也需要做标记
     */
    // 点击新增预设的内容
    insertContent(value, type) {
      const from = this.editor.getCursor();
      if (type === "variable") {
        this.editor.replaceSelection(value);
        const to = this.editor.getCursor();
        this.markText(from, to, value, "cm-field");
      } else if (type === "func") {
        this.editor.replaceSelection(`${value}()`);
        const to = this.editor.getCursor();
        this.markText(from, { line: to.line, ch: to.ch - 4 }, value, "cm-func");
        this.editor.setCursor({ line: to.line, ch: to.ch - 1 });
      } else if (type === "end") {
        this.editor.replaceSelection(value, from);
      } else if (type === "count") {
        this.editor.replaceSelection(value);
        // const to = this.editor.getCursor();
        // this.markText(from, to, value, 'cm-count');
      } else if (type === "annot" || type === "common") {
        this.editor.replaceSelection(value);
        // const to = this.editor.getCursor();
        // this.markText(from, to, value, 'cm-green');
      } else if (typeof value === "string") {
        this.editor.replaceSelection(value);
      } else {
        this.editor.replaceSelection(value);
      }
      this.editor.focus();
    },
    autoMarkText() {
      if (this.scriptAlloca.content) {
        // this.autoMark(this.scriptAlloca.content);
        this.focus(this.scriptAlloca.content);
      }
    },
    focus(value) {
      this.editor.setCursor({
        line: 0,
        ch: value ? value.length : 0
      });
      this.editor.focus();
    },
    markText(from, to, label, className) {
      // if (className === void 0) {
      //   className = "cm-func";
      // }
      let text = document.createElement("span");
      text.className = className;
      text.innerText = label;
      this.editor.markText(from, to, {
        atomic: true,
        replacedWith: text
      });
    },
    /**
     * 解析 editor 的内容，分别对表单变量和函数进行标记
     */
    // 默认下面的字体颜色样式
    autoMark() {
      const editor = this.editor;
      const lines = editor.lineCount();
      // var elements = document.querySelectorAll(".cm-func1");
      // console.log('拿到的类', elements);
      // elements.forEach(element => {
      //     element.classList.remove("cm-func1");
      // });
      for (let line = 0; line < lines; line++) {
        const content = editor.getLine(line);
        // 标记函数调用,匹配一个或多个连续的大写字母，后面可以有任意数量的空白字符，再紧跟一个左括号
        // content.replace(/([A-Z]+)\s*\(/g, (_, func, pos) => {
        //   this.markText(
        //     { line: line, ch: pos },
        //     { line: line, ch: pos + func.length },
        //     func,
        //     "cm-func"
        //   );
        //   console.log("func", _, func, func.length, pos);
        //   return _;
        // });

        // let addedMarks = [];
        // $后面加上空格
        // content.replace(/\$\S*(=|==|<|>|!=)(?!=)/g, (_, equalSign, pos) => {
        //     console.log('空格gggggg', _, equalSign, equalSign.length, pos);
        //     if (equalSign === "=" || equalSign === "==" || equalSign === "<" || equalSign === ">" || equalSign === "!=") {
        //         // this.markText({ line: line, ch: pos }, { line: line, ch: pos + _.length }, _, 'cm-func1');
        //         for (let i = 0; i < _.length; i++) {
        //             // let mark =
        //             this.markText({ line: line, ch: pos + i }, { line: line, ch: pos + i + 1 }, _.charAt(i), 'cm-func1');
        //             // addedMarks.push(mark); // 记录已添加的标记
        //         }

        //     }
        //     // else {

        //     //     for (let i = 0; i < _.length; i++) {
        //     //         let mark = this.markText({ line: line, ch: pos + i }, { line: line, ch: pos + i + 1 }, _.charAt(i), 'cm-func2');
        //     //         addedMarks.push(mark); // 记录已添加的标记
        //     //     }
        //     // }
        //     return _;
        // });
        // addedMarks.forEach(mark => {
        //     if (mark && (mark.className === 'cm-func1' || mark.className === 'cm-func2')) {
        //         mark.clear();
        //     }
        // });

        // 标记表单变量,这应该是动态获取，自行替换即可
        // let vars = ["表单", "表单1", "表单11", "表单12"];
        // vars.forEach(v => {
        //   let from = 0;
        //   let idx = -1;
        //   while (~(idx = content.indexOf(v, from))) {
        //     this.markText(
        //       { line: line, ch: idx },
        //       { line: line, ch: idx + v.length },
        //       v,
        //       "cm-field"
        //     );
        //     from = idx + v.length;
        //   }
        // });

        // 注释标识
        let startIndex = content.indexOf("//");
        while (startIndex !== -1) {
          let endIndex = content.indexOf("\n", startIndex);
          if (endIndex === -1) {
            endIndex = content.length;
          }
          let textToHighlight = content.substring(startIndex, endIndex);
          for (let i = 0; i < textToHighlight.length; i++) {
            this.markText(
              { line: line, ch: startIndex + i },
              { line: line, ch: startIndex + i + 1 },
              textToHighlight.charAt(i),
              "cm-green"
            );
          }
          // 在这里调用 markText 函数，给找到的文本添加自定义的类名
          // this.markText({ line: line, ch: startIndex }, { line: line, ch: endIndex }, textToHighlight, 'cm-green');

          startIndex = content.indexOf("//", endIndex);
        }

        // 大小括号变成暗红色
        let vars3 = ["(", ")", "{", "}"];
        vars3.forEach(v => {
          let from = 0;
          let idx = -1;
          while (~(idx = content.indexOf(v, from))) {
            this.markText(
              { line: line, ch: idx },
              { line: line, ch: idx + v.length },
              v,
              "cm-darkRed"
            );
            from = idx + v.length;
          }
        });

        if (this.themeSelect == 0) {
          // 标记算数运算符
          let vars1 = ["+", "-", "*", "/", "%", "=", "=="];
          vars1.forEach(v => {
            let from = 0;
            let idx = -1;
            while (~(idx = content.indexOf(v, from))) {
              for (let i = 0; i < v.length; i++) {
                this.markText(
                  { line: line, ch: idx + i },
                  { line: line, ch: idx + i + 1 },
                  v.charAt(i),
                  "cm-count"
                );
              }

              // this.markText(
              //   { line: line, ch: idx },
              //   { line: line, ch: idx + v.length },
              //   v,
              //   "cm-count"
              // );
              from = idx + v.length;
            }
          });
          // 数字以及特殊英文变蓝色
          let vars4 = ["if", "and", "then", "endif", "else", "or", "not"];
          vars4.forEach(v => {
            let from = 0;
            let idx = -1;
            while (~(idx = content.indexOf(v, from))) {
              // this.markText({ line: line, ch: idx }, { line: line, ch: idx + v.length }, v, 'cm-blue');
              // from = idx + v.length;
              for (let i = 0; i < v.length; i++) {
                this.markText(
                  { line: line, ch: idx + i },
                  { line: line, ch: idx + i + 1 },
                  v.charAt(i),
                  "cm-blue"
                );
              }
              from = idx + v.length;
            }
          });
          // 数字以及特殊英文变蓝色
          let vars5 = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
          vars5.forEach(v => {
            let from = 0;
            let idx = -1;
            while (~(idx = content.indexOf(v, from))) {
              this.markText(
                { line: line, ch: idx },
                { line: line, ch: idx + v.length },
                v,
                "cm-num"
              );
              from = idx + v.length;
            }
          });
        } else if (this.themeSelect == 1) {
          // 标记算数运算符
          let vars1 = ["+", "-", "*", "/", "%", "=", "=="];
          vars1.forEach(v => {
            let from = 0;
            let idx = -1;
            while (~(idx = content.indexOf(v, from))) {
              this.markText(
                { line: line, ch: idx },
                { line: line, ch: idx + v.length },
                v,
                "cm-count1"
              );
              from = idx + v.length;
            }
          });

          // 黑色背景 判断语句
          let vars4 = ["if", "and", "then", "endif", "else", "or", "not"];
          vars4.forEach(v => {
            let from = 0;
            let idx = -1;
            while (~(idx = content.indexOf(v, from))) {
              // this.markText({ line: line, ch: idx }, { line: line, ch: idx + v.length }, v, 'cm-judge1');
              // from = idx + v.length;
              for (let i = 0; i < v.length; i++) {
                this.markText(
                  { line: line, ch: idx + i },
                  { line: line, ch: idx + i + 1 },
                  v.charAt(i),
                  "cm-blue"
                );
              }
              from = idx + v.length;
            }
          });
          // 黑色背景  数字
          let vars5 = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
          vars5.forEach(v => {
            let from = 0;
            let idx = -1;
            while (~(idx = content.indexOf(v, from))) {
              this.markText(
                { line: line, ch: idx },
                { line: line, ch: idx + v.length },
                v,
                "cm-num1"
              );
              from = idx + v.length;
            }
          });
        }
        // // 匹配任意字符
        // content.replace(/(.*)/, (_, func, pos) => {
        //   this.markText(
        //     { line: line, ch: pos },
        //     { line: line, ch: pos + func.length },
        //     func,
        //     "cm-func1"
        //   );
        //   console.log("func", _, func, func.length, pos);
        //   return _;
        // });
      }
    },
    //清除所有的类名
    autoMark1() {
      const editor = this.editor;
      if (editor) {
        const totalLines = editor.lineCount();
        for (let line = 0; line < totalLines; line++) {
          const marks = editor.findMarksAt({ line });
          marks.forEach(mark => {
            mark.clear();
          });
        }
      } else {
        console.error("Editor is undefined or null");
      }
    },

    //获取设备的从机变量树
    getSlaveSensorTree(id = this.deviceData.id) {
      var that = this;
      this.sensorTree = [];
      this.$http({
        method: "post",
        url: "api/equip/sensorTree", //该接口已去掉虚拟变量
        data: {
          id: id
        }
      })
        .then(res => {
          if (res && res.data.result == "success") {
            if (res.data.data.length) {
              var z = res.data.data;
              for (let i = 0; i < z[0].children.length; i++) {
                const s = z[0].children[i];
                for (let index = 0; index < s.children.length; index++) {
                  z[0].children[i].children[index].label =
                    z[0].children[i].children[index].label +
                    " " +
                    "(" +
                    "$" +
                    z[0].children[i].children[index].value_key +
                    "@" +
                    z[0].children[i].children[index].slave_no +
                    ")";
                }
              }
              setTimeout(() => {
                that.sensorTree = Array.from(z);
                that.$forceUpdate();
              }, 200);
            }
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 给空的前面加一个空格
    renderContent(h, { node, data }) {
      if (data.children && data.children.length === 0) {
        if (!data.label.startsWith("\u00A0\u00A0\u00A0\u00A0")) {
          data.label = "\u00A0\u00A0\u00A0\u00A0" + data.label; // 在label前添加一个占位符，如果已有占位符则不重复添加
        }
      }
      return h(
        "span",
        // {
        //     style: { display: 'inline-flex', alignItems: 'center' }
        // },
        [data.label]
      );
    },
    // 禁用tree
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },

    getSensorString(data, node, ele) {
      if (this.look === 2) {
        return;
      }
      if (!data.value_key) {
        return;
      }
      let symbol = "-";
      if (data.label.includes(symbol)) {
        this.$message({
          message: "变量中不能含有'-''",
          type: "error",
          center: true
        });
        return;
      }
      this.sibling = ele.$el.parentNode.children;
      // for(let i=0;i<this.sibling.length;i++){
      // 	  this.sibling[i].style.color="#333";
      // }
      // ele.$el.style.color = "#409eff";
      let str = "$" + data.value_key + "@" + data.slave_no + " ";
      this.insertContent(str, "string");
      // if (this.oper == "add") {
      // this.addForm.formula = (this.addForm.formula + '  ' + str).trim();
      // } else if (this.oper == "edit") {
      //     this.editForm.formula = (this.editForm.formula + '  ' + str).trim();
      // }
    },
    // 点击读取按钮
    read() {
      this.$emit("goRead", true);
    },
    // 点击保存按钮
    // save() {

    // },
    // 点击下发按钮
    Distribute() {
      (this.loading = true),
        this.$http({
          method: "post",
          url: "api/equip/writeScript",
          data: {
            id: this.deviceData.id
          }
        })
          .then(res => {
            if (res && res.data.result == "success") {
              this.loading = false;
              this.$message({
                message: "下发成功!",
                type: "success",
                center: true
              });
            }
          })
          .catch(error => {
            console.log(error);
          });
    },
    // 切换主题
    changeTheme() {
      var that = this;
      that.linshi = that.scriptAlloca.content;
      that.scriptAlloca.content = "";
      setTimeout(() => {
        // that.autoMark();
        if (that.themeSelect == 0) {
          // 默认
          that.cmOptions.theme = "idea";
          that.scriptAlloca.content = this.linshi;
        } else if (that.themeSelect == 1) {
          // 黑色的
          that.cmOptions.theme = "3024-night";
          that.scriptAlloca.content = this.linshi;
        }
      }, 150);
      setTimeout(() => {
        // that.autoMark();
      }, 600);
    }
  }
};
</script>

<style lang="less" scoped>
.scriptManage {
  width: 100%;
  height: calc(100vh - 1.4rem);
}

.btn_group {
  width: 100%;
  height: 0.8rem;
  line-height: 0.8rem;
  // border: 1px solid rgb(12, 15, 219);
  // margin-left: .4rem;
  margin-bottom: 0.2rem;
  position: relative;
  // overflow: auto;
}

.btn_group_list {
  // width: 70%;
  height: 1.2rem !important;
  line-height: 1.2rem !important;
  // overflow: auto;
  // border: 2px solid red;
  font-size: 0.36rem;
  text-align: left;
  padding: 0 0.3rem;
  // font-weight: 600;
  color: #5a5959;
}

.btn_group_btn {
  height: 1.4rem !important;
  line-height: 1.4rem !important;
  // border: 1px solid red;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin-left: 0.7rem;
}

.btn_group_btn1 {
  font-size: 0.26rem;
  // font-weight: 600;
  // margin: 0 auto;
}

.scriptManage_bottom {
  margin: 0 auto;
  margin-top: 0.3rem;
  width: 99.1%;
  height: calc(100vh - 0.6rem);
  display: flex;
  justify-content: space-between;
}

.scr_list {
  width: 20%;
  height: calc(100vh - 1.6rem);
  border: 1px solid #ccc;
  border-radius: 0.2rem;
  overflow: hidden;
  position: relative;
}

.headerTop {
  height: 1.2rem;
  line-height: 1.2rem;
  width: 100%;
  padding: 0 4%;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ccc;
}

.iconBtn {
  font-size: 0.42rem;
  margin-left: 6px;
}

.top_list {
  // border: 1px solid red;
  height: calc(100% - 2rem);
  overflow: auto;
}

// 脚本列表的样式
.scr_list_top {
  width: 100%;
  height: 100%;
  // background-color: antiquewhite;
  overflow: auto;
  padding: 0 0.2rem;
}

.oneScriptList {
  width: 100%;
  height: 0.7rem;
  line-height: 0.7rem;
  padding: 0 4%;
  // text-align: left;
  display: flex;
  justify-content: space-between;
  font-size: 0.3rem;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
}

// 当前选中的脚本列表样式
.selectedItem {
  // background: linear-gradient(to right, #b5d0be, #8dbdb3);
  background-color: #eee;
}

// 按钮组
.left_btn_group {
  position: absolute;
  display: flex;
  bottom: 0.1rem;
  left: 50%;
  transform: translateX(-50%);
}

.scr_group {
  width: 58%;
  height: calc(100vh - 1.6rem);
  border: 1px solid #ccc;
  border-radius: 0.2rem;
  overflow: hidden;
  position: relative;
}

.point_group {
  width: 20%;
  height: calc(100vh - 1.6rem);
  border: 1px solid #ccc;
  border-radius: 0.2rem;
  overflow: auto;
}

.point_group h5 {
  width: 100%;
  font-size: 0.3rem;
  font-weight: normal;
  font-weight: 600;
  height: 1.2rem;
  line-height: 1.2rem;
  border-bottom: 1px solid #ccc;
  text-align: left;
  padding-left: 0.2rem;
}

.sensorTree {
  // min-height: 7rem;
  /* max-height: calc(100% - 5.6rem); */
  max-height: calc(100% - 1.4rem);
  box-sizing: border-box;
  border-radius: 5px;
  margin-top: 0.2rem;
  padding-top: 0.1rem;
  overflow: auto;
  color: #333;
  // border: 1px solid #ccc;
}

.sensorTree /deep/ .el-tree-node__content .el-tree-node__label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sensorTree /deep/ .el-tree-node__content .is-leaf {
  width: 0 !important;
  height: 0 !important;
  padding: 3px !important;
  overflow: hidden;
  /* padding-left:28px!important; */
}

.filter-tree {
  font-size: 0.3rem !important;
}

.filter-tree /deep/ .el-tree-node__content {
  width: 97% !important;
  // background-color: #61afef;
  // border: 1px solid red !important;
  // white-space: nowrap !important;
  // overflow: hidden !important;
  // text-overflow: ellipsis !important;
}

.filter-tree /deep/ .el-tree-node__content span:nth-child(2) {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.top_btn {
  display: inline-block;
  width: 2.2rem;
  height: 1.2rem;
  line-height: 1.2rem;
  user-select: none;
  margin-top: 0.1rem;
  background-color: #f56c6c;
  font-size: 0.3rem;
  border-radius: 0.2rem;
  text-align: center;
  color: #fff;
}

.inpu {
  width: 3rem;
}

.inpu /deep/ .el-input__inner {
  padding: 0 3px !important;
}

/* 其他的样式 */

.code-edit {
  height: calc(100% - 2.2rem); //3.8rem
  // border: 1px solid gray;
  // border-radius: .2rem;3
  width: 100%;
  overflow: auto;
}

.code-edit /deep/ .CodeMirror {
  border-bottom: 1px solid #ccc;
}

.picker {
  height: 100% !important;
  text-align: left;
  width: 50%;
  margin: 0 auto;

  .code-edit {
    height: 100% !important;
    border-radius: 6px;
    border: 1px solid #e8e9eb;
    text-align: left !important;
  }
}

.code-edit /deep/.CodeMirror-scroll {
  text-align: left !important;
  overflow: auto !important;
  font-size: 0.38rem;
  height: 100% !important;
}

.code-edit /deep/.vue-codemirror {
  height: 100% !important;
  // border: 10px solid red !important;
}

.code-edit /deep/ .vue-codemirror .CodeMirror {
  height: 100% !important;
}

.top-title {
  background-color: #fafafa;
  height: 30px;
  vertical-align: center;
  line-height: 30px;
  padding-left: 10px;
  border-radius: 4px 4px 0 0;
  border-bottom: none;
}

.save_btn {
  position: absolute;
  right: 30px;
  top: 0.4rem;
  font-size: 0.5rem;
  cursor: pointer;
}

.code-edit /deep/ .CodeMirror {
  height: calc(100vh - 6.6rem) !important;

  /*表单变量样式*/
  .cm-field {
    background: #007bff;
    padding: 3px 5px;
    border-radius: 3px;
    color: #fff;
    margin: 0 1px;
  }

  /*函数样式*/
  .cm-func {
    color: #ae4597;
    display: contents;
  }

  .cm-func1 {
    // color: #ffffff;
  }

  /* $后没有空格  爆红 */

  .cm-func1 {
    // border-bottom: 2px dashed red !important;
  }

  .cm-func2 {
    border-bottom: 0 dashed transparent !important;
  }

  /*运算符的样式*/
  .cm-count {
    color: red;
  }

  /*运算符的样式*/
  .cm-count1 {
    color: #bd5d2f;
  }

  .cm-green {
    color: green;
  }

  .cm-darkRed {
    color: #990000;
  }

  .cm-blue {
    color: #61afef;
  }

  .cm-yellow {
    color: yellow;
  }

  .CodeMirror-scroll {
    width: 100%;
  }

  .cm-judge1 {
    color: #d8a0df;
  }

  .cm-num {
    color: #00009f;
  }

  .cm-num1 {
    color: #99ceab;
  }
}

.el-menu-demo {
  border-bottom: 0 !important;
  background-color: #f2f5f7;
}

.el-menu-demo /deep/ .el-submenu__title {
  border-bottom: 0 !important;
  font-size: 0.34rem !important;
  font-weight: 600;
}

.el-menu-demo /deep/ .is-opened {
  box-sizing: border-box;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.el-menu-demo /deep/ .el-menu-item {
  color: black !important;
}

.itemMenu {
  color: #000 !important;
  background-color: #fff !important;
}

.itemMenu:hover {
  color: deepskyblue !important;
  // color:#fff !important;
  // background-color:deepskyblue !important;
}

.itemMenu.is-active {
  border-bottom: 0 !important;
  color: #fff !important;
  background-color: deepskyblue !important;
}

.el-menu-demo /deep/ .el-submenu__title:hover,
.oneMenu:hover {
  color: #fff !important;
  background-color: deepskyblue !important;
}

.oneMenu.is-active {
  border-bottom: 0 !important;
  color: #000 !important;
  background-color: #f2f5f7 !important;
}

.oneMenu.is-active:hover {
  color: #fff !important;
  background-color: deepskyblue !important;
}

// .hasChild /deep/ .el-submenu .el-submenu__title:hover{
// 	color:#fff !important;
// 	background-color:deepskyblue !important;
// }
</style>
